<template>
    <el-card class="box-card" style="width: 29%; height: 400px" shadow="always">
        <div slot="header" class="clearfix">
            <el-button
                style="float: left; padding: 3px 0px"
                type="text"
                @click="removeSession"
                v-if="user.username!=''&&user.length!=0">
                退出登录
            </el-button>
            <el-button
                style="float: right; padding: 3px 0px"
                type="text"
                >
                <span v-if="user.username!=''&&user.length!=0">欢迎{{user.username}}</span>
                <span v-else @click="show">登录/注册</span>
            </el-button>
        </div>
        <Login ref="Login" @getU="getUser"></Login>

        <div>
            <div class="block">
                <el-avatar :size="90" :src="user.headpicture" style="margin-bottom: 15px"></el-avatar>
                <el-button type="text" style="font-size: 17px;height: 20px" v-if="user.username!==''&& user.length!==0 && user!==null">{{user.username}}</el-button>
                <el-button type="text" style="font-size: 17px;height: 20px" @click="show" v-else>请登录</el-button>
            </div>
            <el-card
                class="box-card"
                style="margin-top: 10px; height: 130px; background-color:#F2F6FC;"
                >
                <el-row>
                    <el-col :span="12">
                          <el-button
                              class="button"
                              type="primary"
                              circle
                              @click="toOrder">
                            <i class="bi bi-box-seam"></i>
                          </el-button>
                          <p>查看订单</p>
                    </el-col>
                    <el-col :span="12">
                        <el-button
                            class="button"
                            type="success"
                            circle
                            @click="toMy">
                            <i class="el-icon-user-solid"></i>
                        </el-button>
                        <p>个人主页</p>
                    </el-col>
<!--                    <el-col :span="8" >-->
<!--                        <el-button-->
<!--                            class="button"-->
<!--                            type="warning"-->
<!--                            circle>-->
<!--                            <i class="el-icon-s-tools"></i>-->
<!--                        </el-button>-->
<!--                        <p>设置中心</p>-->
<!--                    </el-col>-->
                </el-row>
            </el-card>
        </div>
    </el-card>
</template>

<script>
    import Login from "@/views/Login.vue";

    export default {
        components: {Login},
        data() {
            return {
                user:{
                    id:'',
                    username:'',
                    loginPassword:'',
                    headPicture:'',
                    phone:'',
                    authority:'',
                    payPassword:'',
                    address:'',
                }
            }
        },
        methods:{
            show(){
                this.$refs['Login'].dialogVisible = true
            },
            getUser(){
                console.log(123)
                this.user = JSON.parse(sessionStorage.getItem('users'));
            },
            removeSession(){
                sessionStorage.removeItem('users');
                sessionStorage.removeItem("uid");
                this.user = [];
                this.$router.replace({path:'empty'})
            },
            toOrder(){
                this.$router.push('/myOrder')
            },
            toMy(){
                this.$router.push('/user')
            },
            getUserSession(){
                this.user = JSON.parse(sessionStorage.getItem('users'))
            }
        },
        mounted() {
            window.addEventListener('setItem',this.getUserSession)
        },
        created() {
            if (JSON.parse(sessionStorage.getItem('users')) != null){
                this.user = JSON.parse(sessionStorage.getItem('users'));
            }
        }
    }
</script>

<style scoped lang="less">
.button{
    font-size: 18px;
    margin: 10px auto 5px;
    display: block;
}
.button>i{
    vertical-align: middle;
}
p{
    color: #909399;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
}
.block{
    width: 100px;
    margin: 10px auto 30px;
    text-align: center;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both
}
</style>